<template>
  <div>
    <el-button type="primary" @click="show = true" size="default"
      >大开餐层</el-button
    >
    <el-dialog
      title="黄亲国戚"
      :visible.sync="show"
      width="50%"
      @close="close"
      @open="open"
    >
      <span>弹层的内容1</span>
      <!-- 具名插槽 -->
      <template #footer>
        <el-button @click="show = false">取消</el-button>
        <el-button type="primary">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: true
    }
  },
  methods: {
    close () {
      console.log('关闭')
    },
    open () {
      console.log('打开')
    }

  }

}
</script>

<style lang="less" scoped>
</style>
